<style lang="stylus" scoped>
  .gtb-layer
    width: 90%;
    border-radius: 1rem;
    box-shadow: 0.3rem 0.4rem 1rem rgba(0,0,0,.8);
    position: fixed;
    z-index: 1000;
    font-size: 0;
    border: .2rem solid #eecf7a;
    background-color: #000;
    box-sizing: border-box;
    top 50%
    left 50%
    transform translate3d(-50%,-50%,0)
    .gtb-layer-top
      position: relative;
      font-size: 0;
      height: 4rem;
      .gtb-layer-close
        position: absolute;
        z-index: 101;
        border-radius: 100rem;
        right: .7rem;
        top: .7rem;
        display: block;
        width: 2.4rem;
        height: 2.4rem;
        box-shadow: 0.15rem 0.2rem 0.5rem rgba(40,50,100,.7);
      img 
        width: 100%;
        height: 100%;
      .gtb-layer-title
        padding-bottom: .5rem;
        text-align: center;
        width: 100%;
        line-height: 4rem;
        font-size: 1.4rem;
        color: #fff;
        text-shadow: 0.1rem 0.2rem 0.4rem rgba(40,50,100,.7);
    .gtb-layer-content
      min-height: 4rem;
      height: auto;
      color: white;
      padding: 0 1.5rem;
      .changeBd
        padding-top: 1rem;
      .layerLoginBox
        display: block;
        font-size: 0;
        margin: 0 auto; 
      .loginInput
        display: flex;
        width: 100%;
        height: 4rem;
        overflow: hidden;
        border-radius: 5rem;
        -webkit-box-sizing: border-box;
        border: .1rem solid #a2a2a2;
        box-shadow: 0 0 0.5rem rgba(255,188,0,.3);
        background-color: #2e2f2f;
        margin-bottom: 1rem;
        i   
          display: block;
          width: 3.2rem;
          height: 3.8rem;
          line-height: 3.8rem;
          text-align: center;
          color: #5a5649;
        input 
          flex: 1;
          width: 100%;
          height: 3.8rem;
          line-height: 3.8rem;
          border: none;
          background-color: transparent;
          font-size: 1.3rem;
          color: #897ea5;
          &:focus
            color #ffffff
      .btn
        box-sizing: border-box;
        position: relative;
        display: inline-block;
        min-width: 8rem;
        height: 2.8rem;
        line-height: 2.7rem;
        text-align: center;
        text-shadow: 0 0.2rem 0.5rem rgba(0,0,0,.4);
        box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,.4);
        background: linear-gradient(to bottom,#eecf7a,#9b7514 100%);
        font-weight: bold;
        font-size: 1.2rem;
        color: #fff;
        border-bottom: none;
        border-left: none;
        border-right: none;
        border-top: .1rem solid rgba(255,255,255,.7);
        border-radius: 4rem;
        margin-top: 1rem;
        width: 97%;
    .gtb-layer-bottom
      height: 1.5rem;
      font-size: 0;
</style>

<template>
  <div class="gtb-layer">
    <div class="gtb-layer-top">
      <a class="gtb-layer-close" @click="this.$parent.rechargebtn"><img src="../assets/close.png"></a>
      <h3 class="gtb-layer-title">修改密码</h3>
    </div>
    <div class="gtb-layer-content">
      <div class="changeBd">
        <div class="layerLoginBox">
          <label class="loginInput">
              <i class="iconfont icon-unie603"></i>
              <input type="password" placeholder="请输入旧密码">
          </label>
          <label class="loginInput">
              <i class="iconfont icon-anquan"></i>
              <input type="password" placeholder="请输入新密码">
          </label>
          <label class="loginInput">
              <i class="iconfont icon-suo"></i>
              <input type="password" placeholder="请输入新密码">
          </label>
          <a class="btn">提交</a>
        </div>
      </div>
    </div>
    <div class="gtb-layer-bottom"></div>
  </div>
</template>

<script>
export default {
  
}
</script>
